<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.banner{
			width: 1300px;
			margin: 100px auto;
			position: relative;
			overflow: hidden;
		}
		.pic{
			width: 10000px;
		}
		.pic img{
			width: 1300px;
			float: left;
		}
		ul{
			position: absolute;
			bottom: 20px;
			left: 50%;
			margin-left: -96px;
		}
		ul li a{
			display: block;
			margin: 0 15px;
			height: 12px;
			width: 12px;
			border-radius: 50%;
			background-color: #999;
			text-decoration: none;
		}
		ul li{
			list-style: none;
			display: inline-block;
		}
	</style>
</head>
<body>
	<div class="banner">
		<div class="pic">
			<img src="meizu4.jpg" alt="">
			<img src="meizu1.jpg" alt="">
			<img src="meizu2.jpg" alt="">
			<img src="meizu3.jpg" alt="">
		</div>
		<ul>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
		</ul>
	</div>
	<script type="text/javascript" src="jquery-1.11.1.js"></script>
	<script>
		$(".banner ul li").click(function(){
			var ind = $(this).index();
			var marleft = ind * -1300;
			$(".pic").animate({"margin-left": marleft},500);
		})
	</script>
</body>
</html>